<template>
  <div class="content">
    <div class="seachHeader">
      <el-form ref="form">
        <div class="formRight">
          <el-button type="primary" @click="getSeach(1)">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="batchDownload">下载</el-button>
        </div>
        <div class="formBox">
          <el-form-item label="区域：" class="item">
            <!-- <el-input v-model="form.area"></el-input> -->
            <el-cascader
              v-model="cascaderValue"
              :options="options"
              :props="{ checkStrictly: true }"
              filterable
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="店长：" class="item">
            <el-input v-model="form.managerName"></el-input>
          </el-form-item>
          <el-form-item label="录入状态：" class="item">
            <el-select v-model="form.recordType" filterable>
              <el-option label="未录入" value="0"></el-option>
              <el-option label="部分录入" value="1"></el-option>
              <el-option label="已录入" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店名称：" class="item">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="店号：" class="item">
            <el-input v-model="form.code"></el-input>
          </el-form-item>
          <el-form-item label="编辑人：" class="item">
            <el-input v-model="form.editor"></el-input>
          </el-form-item>
          <el-form-item label="店铺类型：" class="item">
            <el-select v-model="form.storeType" filterable>
              <el-option label="公司" value="1"></el-option>
              <el-option label="个人" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店状态：" class="item">
            <el-select v-model="form.storeState" filterable>
              <el-option label="正常" value="0"></el-option>
              <el-option label="异常" value="1"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="tableItenBox">
              <div
                class="demo-table-expand"
                v-for="(item, index) in props.row.fileList"
                :key="index"
              >
                <div class="name">{{ item.name }}</div>
                <div class="imgBox">
                  <img
                    v-for="(i, k) in item.urlList"
                    :key="k"
                    :src="$baseImgUrl + i.img"
                    @click="viewPic(props.row, i)"
                    alt=""
                  />
                  <!-- 上传证件照 -->
                  <div @click="upFile(props.row, item)" class="upFile">
                    <span class="el-icon-plus"></span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="城市" prop="city"></el-table-column>
        <el-table-column label="区域" prop="area"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="店名" prop="name"></el-table-column>
        <el-table-column label="店号" prop="code"></el-table-column>
        <el-table-column label="店长" prop="managerName"></el-table-column>
        <el-table-column
          label="店铺类型"
          prop="storeType"
          :formatter="storeTypeFormatter"
        >
        </el-table-column>
        <el-table-column label="编辑人" prop="editor"></el-table-column>
        <el-table-column
          label="门店状态"
          prop="storeState"
          :formatter="storeStateFormatter"
        >
        </el-table-column>
        <el-table-column
          label="录入状态"
          prop="recordType"
          :formatter="recordTypeFormatter"
        >
        </el-table-column>
      </el-table>
      <pagination
        style="margin-top:20px"
        v-show="totalSize > 0"
        :total="totalSize"
        :page.sync="form.pageNum"
        :limit.sync="form.size"
        @pagination="getSeach(0)"
      />
      <el-dialog
        :visible.sync="dialogVisible"
        width="62%"
        :before-close="handleClose"
      >
        <div class="fileBox">
          <el-image
            :src="$baseImgUrl + currentFile.img"
            fit="contain"
          ></el-image>

          <div class="flieMessage">
            <p>商品类型：{{ currentFile.type }}</p>
            <p>证件类型：{{ currentFile.certificateName }}</p>
            <p>证件名称：{{ currentRow.name }}+{{ currentFile.name }}</p>
            <p>提醒日期：{{ currentFile.remindTime }}</p>
            <p>统一社会信用代码：{{ currentFile.code }}</p>
          </div>
        </div>
        <div class="dialogVisibleBtns">
          <el-button
            icon="el-icon-close"
            @click="dhandleFlie(0, currentRow, currentFile)"
            >删除证件
          </el-button>
          <el-button
            icon="el-icon-download"
            @click="dhandleFlie(1, currentRow, currentFile)"
            >下载证件
          </el-button>
          <el-button
            icon="el-icon-sort"
            class="changeIconBtn"
            @click="dhandleFlie(2, currentRow, currentFile)"
            >修改信息
          </el-button>
        </div>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogVisible2"
        width="62%"
        @closed="handleClose2"
      >
        <div class="dialogInfo">
          <div class="dialogInfoLeft">
            <el-form
              :model="form2"
              ref="uploadForm"
              :rules="uploadFormRules"
              label-position="left"
              label-width="150px"
            >
              <el-form-item label-width="0" style="display: flex" prop="img">
                <PictureUpload
                  list-type="picture-card"
                  name="multipartFile"
                  ref="pictureUploadRef"
                  accept="image/png, image/jpg, image/jpeg"
                  :certificateId="form2.certificateId"
                  :limitNum="1"
                  :isRead="!isShow"
                  :uploadApi="uploadUrl"
                  :initPics="zbdtInit"
                  @getUploadData="getUploadDataHandle"
                />
              </el-form-item>
              <el-form-item label="门店类型：" prop="storeType">
                <el-radio-group v-model="form2.storeType">
                  <el-radio label="1">个人</el-radio>
                  <el-radio label="2">公司</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="证件类型：" prop="certificateId">
                <el-radio-group disabled v-model="form2.certificateId">
                  <el-radio label="3">烟草证</el-radio>
                  <el-radio label="4">食品证</el-radio>
                  <el-radio label="5">营业执照</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="证件名称：店名+" prop="name">
                <el-input v-model="form2.name" placeholder="请输入证件名称" />
              </el-form-item>
              <el-form-item label="统一社会信用代码：" prop="code">
                <el-input
                  v-model.number="form2.code"
                  placeholder="请输入统一社会信用代码："
                />
              </el-form-item>
              <el-form-item label="设置提醒日期：" prop="remindTime">
                <el-date-picker
                  v-model="form2.remindTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>
          <div class="dialogInfoRight">
            <span>名称：{{ imgPrms.name }}</span>
            <span>类型：{{ imgPrms.type }}</span>
            <span>法定代表人：{{ imgPrms.owner }}</span>
            <span>统一社会信用代码：{{ imgPrms.code }}</span>
            <span>注册资本：{{ imgPrms.createMoney }}</span>
            <span>成立日期：{{ imgPrms.createDate }}</span>
            <span>营业期限：{{ imgPrms.yyqx }}</span>
            <span>住所：{{ imgPrms.address }}</span>
            <span>经营范围：{{ imgPrms.around }}</span>
          </div>
        </div>

        <div class="dialog-footer">
          <el-button @click="saveDetail('uploadForm')" type="primary"
            >确定
          </el-button>
          <el-button @click="closeSave">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import UpLoad from "@/components/UpLoad";
import PictureUpload from "@/components/picture-upload";
import Const from "@/api/Const.js";

export default {
  components: { Pagination, UpLoad, PictureUpload },
  name: "shopFile",

  data() {
    return {
      uploadUrl: "/uhome-file-system/api/pc/upload/uploadImage",
      uploadAccept: ".png,.jpg,.pdf",
      isShow: true,
      zbdtInit: "",
      options: [
        {
          value: "武汉",
          label: "武汉",
          children: [
            {
              value: "江岸区",
              label: "江岸区"
            },
            {
              value: "江汉区",
              label: "江汉区"
            }
          ]
        },
        {
          value: "南昌",
          label: "南昌",
          children: [
            {
              value: "虎口",
              label: "虎口"
            }
          ]
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      imgPrms: {},
      totalSize: 0,
      // jsonData:{
      //   pageNum:1,
      //   size:10
      // },
      cascaderValue: "",
      fileList: [],
      form: {
        managerName: "", //店长
        recordType: "", //录入状态
        name: "", //门店名称
        code: "", //店号
        editor: "", //编辑人
        storeType: "", //店铺类型
        storeState: "", //门店状态
        pageNum: 1,
        size: 10
      },
      form2: {
        id: null,
        storeId: null, //门店ID
        storeType: null, //门店类型
        certificateId: null, //证件类型id
        name: null, //证件名称
        img: null, //证件图片
        remindTime: null, //提醒日期
        code: null //统一社会信用代码
      },
      uploadFormRules: {
        certificateId: [
          { required: true, message: "请选择证件类型", trigger: "change" }
        ],
        storeType: [
          { required: true, message: "请选择门店类型", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入证件名称", trigger: "change" }
        ],
        code: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur"
          },
          {
            type: "number",
            message: "数字类型",
            trigger: "blur"
          }
        ],
        remindTime: [
          { required: true, message: "请选择选择日期：", trigger: "change" }
        ]
      },
      tableData: [],
      currentSelect: [], //当前选中
      dialogVisible: false, //查看证件照
      dialogVisible2: false, //查看证件照
      currentRow: {}, //当前店铺行
      currentFile: {}, //当前查看证件
      certificateOptions: [] //证件类型
    };
  },
  mounted() {
    this.getSeach(0);
  },
  methods: {
    changeZbdt(response) {
      console.log(response, "response");
    },
    handleChange(value) {
      console.log(value);
      this.form.city = value[0];
      this.form.area = value[1];
    },
    storeTypeFormatter(row, column) {
      if (row.storeType == 0) {
        return "个人";
      } else if (row.storeType == 1) {
        return "公司";
      } else {
        return "";
      }
    },
    storeStateFormatter(row, column) {
      if (row.storeState == 0) {
        return "正常";
      } else if (row.storeState == 1) {
        return "异常";
      } else {
        return "";
      }
    },
    recordTypeFormatter(row, column) {
      if (row.recordType == 0) {
        return "未录入";
      } else if (row.recordType == 1) {
        return "部分录入";
      } else if (row.recordType == 2) {
        return "已录入";
      } else {
        return "";
      }
    },
    saveDetail(formName) {
      var that = this;

      this.$refs[formName].validate(valid => {
        if (valid) {
          that.$axios
            .get(Const.api.save_store_data, {
              params: that.form2
            })
            .then(res => {
              console.log(res);
              if (res.data.code == 0) {
                that.dialogVisible2 = false;
                that.$message({
                  message: "保存成功！",
                  type: "success"
                });
                location.reload();
              } else {
                // that.$message({
                //   message: "上传证书类型不匹配！",
                //   type: "warm"
                // });
              }
            });
        } else {
          return false;
        }
      });
    },
    closeSave() {
      this.fileList = [];
      this.dialogVisible2 = false;
    },
    changeFile(file) {
      if (this.validateFileType(file)) {
        this.file = file;
      } else {
        this.file = "";
        this.$refs.reference.clearFiles();
      }
    },
    validateFileType(file) {
      const isJPG =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      // 校验文件名不能包含特殊字符
      let fileName = file.name;
      let re = /[\\:/*?<>”|()]/gi;
      const isValidFileName = !re.test(fileName);
      if (!isValidFileName) {
        this.$message.error("上传图片文件名不能包含:*?<>”|()");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是JPG或PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M && isValidFileName;
    },
    handlePictureCardPreview(file) {
      // this.ruleForm.coverImg = file.url;
      this.form2.img = file.url;
      this.dialogVisible2 = true;
    },
    getSeach() {
      this.$axios
        .get(Const.api.query_store_data, {
          params: this.form
        })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            let data = res.data.data.list;
            this.tableData = data;
            this.form.pageNum = res.data.data.pageNum;
            this.totalSize = Number(res.data.data.total);
          }
        });
    },
    reset() {
      this.cascaderValue = "";
      this.form = {};
    },
    batchDownload() {
      if (this.currentSelect.length == 0) {
        return;
      }
      console.log("this.currentSelect", this.currentSelect);
      window.open(Const.api.downloadBatchStore + "?ids=" + this.currentSelect);
    },
    viewPic(row, item) {
      console.info("row", row);
      console.info("item", item);
      this.currentRow = row;
      this.currentFile = item;
      this.dialogVisible = true;
    },
    //上传新证件
    upFile(row, item) {
      this.form2 = {
        storeName: row.name,
        certificateId: item.id
      };
      this.certificateMethod();
      this.form2.storeId = row.id;

      this.dialogVisible2 = true;
      this.dialogVisible = false;
    },
    certificateMethod() {
      let that = this;
      that.$axios
        .get(Const.api.query_certificate, { params: { certificateType: "2" } })
        .then(res => {
          if (res.data.code == 0) {
            that.certificateOptions = res.data.data;
          }
        });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleClose2() {
      this.fileList = [];
      this.form2 = {};
      this.imgPrms = {};
      this.isShow = true;
      console.log(this.form2, this.imgPrms, "imgPrmsimgPrmsimgPrms");
      this.$refs.pictureUploadRef.hideOrShowAddMoreIcon([]);
      this.$refs.pictureUploadRef.removeFileListHandle();

      this.dialogVisible2 = false;
    },
    //处理证件
    dhandleFlie(num, currentRow, currentFile) {
      let that = this;
      //    num 0删除 1下载 2修改
      if (num === 0) {
        that
          .$confirm(
            '确定要删除"' + currentRow.name + currentFile.name + '"吗',
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
          .then(() => {
            let params = {
              id: currentFile.id
            };
            that.$axios
              .post(Const.api.delete_store_data, params, {
                headers: {
                  "Content-Type": "application/json" //将表单数据传递转化为form-data类型
                }
              })
              .then(res => {
                if (res.data.code == 0) {
                  that.$message({
                    type: "success",
                    message: "删除成功!"
                  });
                  that.handleClose();
                  location.reload();
                }
              });
          })
          .catch(() => {
            that.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else if (num == 1) {
        this.downLoadFile(currentFile);
      } else {
        this.initEditForm2(currentRow, currentFile);
        this.dialogVisible2 = true;
        this.handleClose();
      }
    },
    handleSelectionChange(val) {
      console.log("val", val);
      let that = this;
      that.currentSelect = [];

      val.forEach(element => {
        that.currentSelect.push(element.id);
      });
      console.log("currentSelect", that.currentSelect);
    },
    downLoadFile(currentFile) {
      window.open(Const.api.downloadFile + "?id=" + currentFile.id + "&type=2");
    },

    getUploadDataHandle({ info = "", img = "" }) {
      if (info) {
        this.imgPrms = info;
      } else {
        this.imgPrms = {};
      }
      if (img) {
        this.form2.img = img;
      } else {
        this.form2.img = "";
      }
    },
    initEditForm2(currentRow, currentFile) {
      this.certificateMethod();
      this.fileList = [
        {
          url: currentFile.img
        }
      ];
      this.form2 = {
        id: currentFile.id,
        storeId: currentFile.storeId,
        storeName: currentRow.name,
        storeType: currentFile.storeType,
        certificateId: currentFile.certificateId,
        img: currentFile.img,
        name: currentFile.name,
        remindTime: currentFile.remindTime,
        code: currentFile.code
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.dialogVisibleBtns {
  display: flex;
  justify-content: space-around;
  align-items: center;

  .el-button {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;

    i.el-icon-sort {
      transform: rotateZ(90deg) !important;
    }
  }
}

.content {
  margin: 20px;
  padding: 20px;
  background-color: #fff;

  .seachHeader {
    .formRight {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-bottom: 20px;
    }

    .formBox {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .item {
        width: 360px;
        display: flex;
        flex-direction: row;
        margin-right: 20px;
      }
    }
  }

  .tableItenBox {
    display: flex;
    flex-direction: row;
    // justify-content: space-around;
    align-items: center;
    // padding: 10px;
    // width: 90vw;
    height: 200px;
    // overflow: hidden;
    overflow-y: scroll;

    .demo-table-expand {
      // min-width: 100px;
      margin: 0 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .name {
        width: 80px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        padding: 5px;
      }

      .imgBox {
        display: flex;
        flex-direction: row;

        img {
          margin-right: 30px;
          width: 100px;
          height: 100px;
          cursor: pointer;
        }

        .upFile {
          width: 60px;
          height: 100px;
          font-size: 28px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border-radius: 8px;
          border: 1px dashed #c0ccda;
          background-color: #fbfdff;
          color: #409eff;
          cursor: pointer;
        }
      }
    }
  }

  .fileBox {
    //   width: 760px;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;

    > .el-image {
      width: 900px;
      height: 508px;
    }

    .flieMessage {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      border-left: 1px solid #999;
      margin-left: 20px;
      padding: 10px;
      font-size: 20px;
      font-weight: 700;

      p {
        margin-bottom: 20px;
      }
    }
  }

  .upflieBox {
    display: flex;
    flex-direction: row;

    .fileBox {
      .formBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        .uploadImage {
          width: 410px;
          margin: 10px 10px 20px 10px;
          // border: 1px dashed #c0ccda;
          // .el-upload--picture-card{
          //   width: 410px ;
          //   height: 160px
          // }
        }
      }
    }

    .rightText {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 0 20px 40px 20px;
      border: 1px dashed #ddd;
      border-radius: 10px;
      width: 400px;

      span {
        padding: 10px 20px;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}

.dialogInfo {
  display: flex;

  .dialogInfoLeft {
    width: 500px;
  }

  .dialogInfoRight {
    padding: 30px;
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    flex: 1;
    border: 1px dashed #dadbdc;
    border-radius: 30px;

    > span {
      font-weight: 700;
      font-size: 18px;
      line-height: 38px;
    }
  }
}

.dialog-footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
